<template>
  <div id="AssessmentInf">
    <div style="width: 1300px">
      <a-form layout="inline">
        <a-form-item label="关键字" class="searchItem">
          <a-input placeholder="请输入" />
        </a-form-item>
        <a-form-item label="">
          <a-button type="primary" @click="getData">查询</a-button>
        </a-form-item>
      </a-form>
    </div>
    <a-table
      bordered
      :scroll="{ y: 580 }"
      :columns="columns"
      style="margin-top: 16px"
      :data-source="tableData"
      :pagination="tablePagination"
      :rowKey="(record, index) => index"
    >
      <template slot="name" slot-scope="text, record">
        <a-tooltip placement="top" v-if="record.name">
          <template slot="title">
            <span>{{ record.name }}</span>
          </template>
          <span style="cursor: default">{{ record.name }}</span>
        </a-tooltip>
        <span v-else-if="!record.name">—</span>
      </template>
      <template slot="tapdProjectId" slot-scope="text, record">
        <a-tooltip placement="top" v-if="record.tapdProjectId">
          <template slot="title">
            <p>{{ record.tapdProjectId }}</p>
          </template>
          <span style="cursor: default">{{ record.tapdProjectId }}</span>
        </a-tooltip>
        <span v-else-if="!record.tapdProjectId">—</span>
      </template>
      <template slot="operation" slot-scope="text, record">
        <a-button
          type="primary"
          @click="viewClick(record)"
          style="margin-right: 10px"
          >查看考核信息</a-button
        >
      </template>
    </a-table>
  </div>
</template>
  <script>
import EmptyWrap from "@/components/emptyWrap";
import api from "@/api/projectManagement/ItpmProjectManagement";
import AssessmentTheory from "@/components/Assessment/theory.vue";
export default {
  components: {
    AssessmentTheory,
  },
  data() {
    return {
      columns: [
        //主页table列的配置
        {
          title: "序列号",
          dataIndex: "id",
          scopedSlots: { customRender: "id" },
        },
        {
          title: "课程计划名",
          dataIndex: "courseName",
          customRender: (text, record) => {
            return record.courseName ? record.courseName : "—";
          },
        },
        {
          title: "开课老师",
          dataIndex: "teacher",
          customRender: (text, record) => {
            return record.teacher ? record.teacher : "—";
          },
        },
        // {
        //   title: "开课时间",
        //   dataIndex: "time",
        //   customRender: (text, record) => {
        //     return record.time ? record.time : "—";
        //   },
        // },
        {
          title: "课程考核信息",
          width: 200,
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
        },
      ],
      tableData: [
        //主页表格的数据
      ],
      tablePagination: {
        //主页表格的分页器
        total: 0,
        current: 1,
        size: "10",
        showQuickJumper: true, //是否可以快速跳转至某页
        showSizeChanger: true, //是否可以改变 pageSize
      },
    };
  },
  created() {
    this.getData(); //获取列表数据
  },
  computed: {
    rowSelection() {
      //抽屉弹出层的table的单选项的相关配置
      return {
        type: "radio",
        columnTitle: "选择",
        onChange: (key, row) => {
          //row代表单选框所选内容
          this.selectedRowKeys = [row[0].id];
        },
        selectedRowKeys: this.selectedRowKeys,
      };
    },
  },
  methods: {
    viewClick(row) {
      this.$emit("changeActved", { data: row, routeName: "AssessmentTheory" }); //跳转到查看考核信息页面
    },
    async getData() {
      let data = await this.$axios.get("/sys/coursePlan/page", {
        params: {
          page: this.tablePagination.current,
          limit: this.tablePagination.size,
          coursePlanName: this.keyword, //关键字(也是课程计划名)
        },
      });
      this.tableData = data.response;
      this.tablePagination.total = data.response.length;
    },
  },
};
</script>
<style scoped>
#AssessmentInf {
  padding: 24px 32px;
  margin: 30px 20px 0 20px;
  border-radius: 2px;
}
</style>
<style lang="scss">
#AssessmentInf {
  height: 800px;
  background: url("~@/assets/img/tableDataBg.png") repeat 100% !important;
  background-size: cover !important;
}
</style>